import { h } from 'vue'
import CodeShow from './CodeShow.vue'
import { codeTextFn } from './codetext'
import './jsxcss.css'

const HelloWorldFn = (props, { emit }) => {
  // 移除响应式状态，改为从 props 接收
  const { msg, count = 0 } = props
  
  // 事件处理函数
  const handleIncrement = () => {
    emit('increment')
  }

  return h('div', [
    h('h2', { class: 'title' }, msg),
    h('button', {
      type: 'button',
      onClick: handleIncrement
    }, `count is ${count}`),
    h(CodeShow, { codeText: codeTextFn })
  ])
}

// 定义组件属性
HelloWorldFn.props = {
  msg: String,
  count: {
    type: Number,
    default: 0
  }
}

// 定义组件发出的事件
HelloWorldFn.emits = ['increment']

export default HelloWorldFn